<template>
  <ve-modal v-model="visible" width="45vw" :title="`请确认是否继续${operateStr}操作？`" @close="visible = false">
    <view class="operate-text">
      <text> 当前订单下存在</text>
      <text class="bold">{{ carLicenseNo }}</text>
      <text>的未结束的ETC租赁订单，{{ operateStr == '换车' ? '车辆被换下' : '还车' }}后，其ETC租赁订单会自动结束，用车人将无法继续使用，可能造成经济损失。</text>
    </view>
    <template #footer>
      <ve-button type="link" size="long" class="cancel-text" @click="onCancel">取消</ve-button>
      <view class="divider"></view>
      <ve-button type="link" size="long" class="btn-text" @click="onConfirm" :loading="okLoading">确认{{ operateStr }}</ve-button>
    </template>
  </ve-modal>
</template>

<script setup>
  import { ref } from 'vue'

  const visible = ref(false)
  const operateStr = ref('')
  const carLicenseNo = ref('')
  const emit = defineEmits(['ok'])
  const open = (record) => {
    carLicenseNo.value = record.carLicenseNo
    operateStr.value = record.operateStr
    visible.value = true
  }
  const okLoading = ref(false)
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }
  const onConfirm = () => {
    visible.value = false
    emit('ok')
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  :deep(.ve-modal-title) {
    color: #3072f6 !important;
    font-weight: bold;
  }
  .bold {
    font-weight: bold;
  }
  .operate-text {
    margin: 20rpx 0;
  }
  .btn-text {
    font-size: 27rpx;
    color: #3072f6;
  }
  .divider {
    width: 2rpx;
    height: 100%;
    background: #E5E6EB;
  }
  .cancel-text {
    font-size: 27rpx;
    color: #191c27;
  }
</style>
